<template>
   <div class="person">
    <h2>一辆{{ car.brand }}车,价值{{ car.price }}</h2>
    <h2>一辆{{ car1.brand }}车,价值{{ car1.price }}</h2>
    <button @click="changePrice">修改汽车单价</button>
    <button @click="changeBrand">修改汽车品牌</button>
    <button @click="changeCar">修改汽车</button>
    <hr>
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="changeSun">点我sum+1</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
    /* 
        ref和reactive的区别
            1.ref创建的变量必须使用.value(可以使用value插件自动添加.value)
            2.reactive重新分配一个新对象,会失去响应式(可以使用Oject.assign来调整)
        使用原则
            1.若需要一个基本类型的响应式数据,必须使用ref
            2.若需要一个响应式对象,层级不深,ref,reactive都可以使用
            3.若需要一个响应式对象,且层级较深,推荐使用reactive
    */

    import { ref,reactive } from 'vue'
    // 数据 
    let car = reactive({
        brand:'奔驰',
        price:100
    })

    let car1 = ref({
        brand:'奥拓',
        price:1
    })
    let sum = ref(0)
    // 方法
    function changePrice(){
        car.price += 10
    }
    function changeSun(){
        sum.value += 1
    }
    function changeBrand(){
        car.brand = '宝马'
    }
    function changeCar(){
        // 页面不更新
        // car = {brand:'奥拓',price:1}
        // 页面更新 修饰reactive的值
        Object.assign(car,{brand:'奥拓',price:1})
        // 修改ref修饰的值
        car1.value = {brand:'奔驰',price:100}
    }
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>